<template>
    <div class=wrap>
        <div class="header">{{$t('configLazyLoad.businessConfig.items')}}{{index + 1}} <span class="detele" @click.stop="remove(index)">{{$t('public.delete')}}</span></div>
        <el-form 
          :model="item"
          label-position="right"
          :rules="rules" 
          ref="form"
          class="form"
          label-width="50px">
            <el-form-item :label="$t('configLazyLoad.businessConfig.title')" class="star-title" prop="subTitle">
              <el-input v-model.trim="item.subTitle" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item :label="$t('configLazyLoad.businessConfig.star')">
              <div v-for="(one, index) in item.subs" :key="index" class="star-item">
                  <el-rate :max="5 - index" class="rate" :value="5 - index" disabled></el-rate>
                  <el-input v-model.trim="one.name" class="input" :maxlength="10"></el-input>
                  <div class="input-btn">
                  <input-button 
                    v-for="(des, num) in one.tags"
                    :key="num"
                    :tagName="des"
                    :close="close(index, num)"
                    :edit="edit(index, num)">
                  </input-button> 
                  <input-button type="button" :add="add(index)"></input-button> 
                  </div>
              </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  import inputButton from './inputButton'
  export default {
    name: 'index',
    props: {
      item: {type: Object, default: function () { return {} }},
      index: Number
    },
    data () {
      return {
        rules: {
          subTitle: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ]
        }
      }
    },
    components: {
      inputButton
    },
    methods: {
      remove () {
        this.$emit('remove', this.index)
      },
      add (index) {
        let self = this
        return (name) => {
          if (self.item.subs[index].tags.length === 5) {
            return this.$message.error(this.$t('configLazyLoad.businessConfig.labelTip'))
          }
          if (self.item.subs[index].tags.indexOf(name) !== -1) {
            return this.$message.error(this.$t('configLazyLoad.businessConfig.repeatLabelTip'))
          }
          self.item.subs[index].tags.push(name)
        }
      },
      submit () {
        let isValid = true
        this.$refs.form.validate((valid) => {
          isValid = valid
        })
        isValid && this.item.subs.forEach((item) => {
          if (!item.name) {
            isValid = false
            this.$message.error(this.$t('configLazyLoad.businessConfig.starDescTip'))
          }
        })
        return isValid
      },
      close (index, num) {
        let self = this
        return function () {
          this.$confirm(this.$t('configLazyLoad.businessConfig.deleteTip'), this.$t('public.tip'), {
            confirmButtonText: this.$t('public.confirm'),
            cancelButtonText: this.$t('public.cancel'),
            cancelButtonClass: 'primary_btn',
            confirmButtonClass: 'primary_btn',
            type: 'warning'
          }).then(() => {
            self.item.subs[index].tags.splice(num, 1)
          }).catch(() => {
          })
        }
      },
      edit (index, num) {
        let self = this
        return function (name) {
          // 内容没有被修改直接return
          if (self.item.subs[index].tags[num] === name) {
            return
          }
          // 内容重复return
          if (self.item.subs[index].tags.indexOf(name) !== -1) {
            return this.$message.error(this.$t('configLazyLoad.businessConfig.repeatLabelTip'))
          }
          self.item.subs[index].tags.splice(num, 1, name)
        }
      }
    },
    beforeRouteEnter (to, from, next) {
    }
  }
</script>

<style scoped lang='stylus'>
    @import '../../../../../assets/common.styl'
    .wrap
      border 1px solid $c-border1
      margin-bottom 20px
    .header
      font-size 12px
      border-bottom 1px solid $c-border1
      background-color #F4F5F9
      padding 0 10px
      .detele
        float right
        color $c-pink
        cursor pointer  
    .form
      padding 20px
      .star-title
        margin-bottom 20px      
    .star-item
      margin-bottom 5px
      display flex
      .rate
        flex-grow 0
        flex-shrink 0
        width 125px
        padding-top 6px
      .input
        flex-grow 0
        flex-shrink 0
        width 180px
        margin 0 20px
      .input-btn
        flex-grow 1
        flex-shrink 1 
</style>